<template>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
        plain
        type="primary"
        @click="handleGrant"
        v-hasPermi="['marketing:points:add']"
      >
        发放积分
      </el-button>
    </el-col>
    <right-toolbar
      :showSearch="false"
      :search="false"
      @queryTable="getList"
    ></right-toolbar>
  </el-row>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <div style="color: #000000a6; font-size: 14px">
        剩余积分：{{ totalScore }}
        <el-divider direction="vertical" />本月获得积分：{{ monthScore }}
      </div>
    </el-col>
  </el-row>
  <el-table v-loading="loading" :data="list" border>
    <el-table-column label="创建时间" align="center" prop="createDate" />
    <el-table-column label="记录内容" align="center" prop="remark" />
    <el-table-column label="积分数量" align="center" prop="score" />
    <el-table-column label="操作人" align="center" prop="createUser" />
  </el-table>
  <pagination
    v-show="total > 0"
    :total="total"
    v-model:page="queryParams.pageNum"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
    size="small"
  />
  <GrantDialog ref="gdRef" @refreshPage="initPage" />
</template>

<script setup>
import {
  getPointListByPerAPI,
  getPointStatisticByPerAPI,
} from '@/api/marketing/points'
import GrantDialog from './grantDialog.vue'

const props = defineProps({
  studentId: {
    type: String,
  },
})

const { proxy } = getCurrentInstance()
const loading = ref(false)
const total = ref(0)
const gdRef = ref(null)
const totalScore = ref(0)
const monthScore = ref(0)

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  list: [],
})

const { queryParams, list } = toRefs(data)

// 事件------------------------------------------------------------------------------------------------------------

// 发放积分
function handleGrant() {
  gdRef.value.handleDialogOpen(props.studentId)
}

function getPointStatisticByPer() {
  loading.value = true
  getPointStatisticByPerAPI({
    studentId: props.studentId,
  }).then((response) => {
    if (response.data) {
      totalScore.value = response.data.totalScore
      monthScore.value = response.data.score
    }
    loading.value = false
  })
}

function getList() {
  loading.value = true
  getPointListByPerAPI({
    ...queryParams.value,
    studentId: props.studentId,
  }).then((response) => {
    list.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

function initPage() {
  getList()
  getPointStatisticByPer()
}

// 调用-------------------------------------------------------------------------------------------------------------------
initPage()
</script>

<style lang="scss" scoped></style>
